
<template>
    <div style="width: 100%;">
        <p>基础图例</p>
        <div id="echart"  style="width: 800px; height: 400px;margin:auto !important;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "echart",
        data(){
            return {
                myChart: null,
            }
        },
        beforeDestroy(){
            if (this.myChart){
                this.myChart.dispose();
            }
        },
        activated(){
            console.log("activated");
            this.initChart();
        },
        mounted() {
            console.log("mounted");
        },
        created(){
            console.log("created")
        },
        methods: {
            initChart: function(){
                this.myChart = echarts.init(document.getElementById('echart'));
                // 绘制图表myChart.resize({
                this.myChart.resize({
                    width: 800,
                    height: 400
                });
                this.myChart.setOption({
                    globe:{
                        show: true,

                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                    },
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            areaStyle: {}
                        }
                    ]
                });
            }
        }
    }
</script>

<style scoped>

</style>
